/* 静态组件和动态组件 */
import React from "react"

/*
* this.setState(partialState,callback)
*      partialState: 支持部分状态修改
*      callback: 状态更改，试图更新完毕后触发执行
*           + 发生在 componentDidUpdate 周期函数之后(DidUpdate 会在任何状态更改后都触发执行；而回调方式，可以在指定状态更新后更改状态)
*           + 特殊：即使我们基于 shouldComponentUpdate 阻止了状态更新，这个callback依然会被触发执行
* setState 在任何地方执行，都是"异步操作"(例如合成时间，周期函数，定时器)
*      + React18 中有一套更新队列的机制
*      + 目的：实现状态的"批处理"，有效减少更新次数，降低性能消耗，有效管理代码执行的逻辑顺序
*      + 减少视图更新的次数，降低渲染消耗的性能
*      + 让更新的逻辑和流程更清晰，稳健
*        原理：采用更新队列机制来处理的
*           + 在当前相同的时间段内，遇到setState会立即放到更新队列中
*           + 此时状态/视图未更新
*           + 当所有的代码操作接受，会"刷新队列"：把所有的setState合并在一起，值触发一次视图更新
*
*   在 React18 和 React16 中，关于 setState 是同步还是异步，是由一些区别的
*       React18 中：不论在什么地方执行setSate，他都是异步的(都是基于 update 更新队列机制，实现的批处理)
*       React16 中：如果在合成事件(JSX元素中基于 onXXX绑定的事件)，周期函数中setSate都是异步操作  --- react操作
*           + 但是如果 setState 出现在其他异步操作中(例如：定时器，手动获取DOM操作的事件绑定)，将变成同步的 --- 原生操作
* */


/*
*   this.setState((prevState)=>{
*       // prevState：存储之前得状态值
*       // return 的对象：就是我们想要修改的新状态值(支持修改部分状态)
*       return { x:... }
*   })
*
* */
class Demo extends React.Component {
    state = {
        x: 0
    }

    handler = () => {
        // 点击完按钮后，视图更新几次？最后一次更新后，x得结果是什么
        // for (let i = 0; i < 20; i++) {
        //     // flushSync(() => {
        //         this.setState({
        //             x: this.state.x + 1
        //         })
        //     // })
        // }
        // 只更新一次，x为 1

        // 需求1：更新 20次，x增加到 20
        // for (let i = 0; i < 20; i++) {
        //     flushSync(() => {
        //         this.setState({
        //             x: this.state.x + 1
        //         })
        //     })
        // }


        // 需求1：更新 1次，x增加到 20
        // for (let i = 0; i < 20; i++) {
        //     this.setState(prevState => {
        //         return {
        //             x: prevState.x + 1
        //         }
        //     })
        // }

    }

    render() {
        let {x, y, z} = this.state
        console.log("视图渲染")
        return <div>
            <span>x:{x}-y:{y}-z:{z}</span>
            <br/>
            <button onClick={this.handler}>按钮</button>
        </div>
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(11111)
    }
}

export default Demo